<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>轮播图</title>
	<style>
    *{
			padding: 0;
			margin: 0;
		}
		ul {
			list-style:none;
		}
		a{
			text-decoration: none;
		}
		.box {
			width: 180px;
			height: 101px;
			overflow: hidden;
			position: relative;
		}
		ul{
			width: 1080px;
			position: absolute;
		}
		ul li {
			width: 180px;
			float: left;
		}
		.btn {
			position: absolute;
			right: 5px;
			bottom: 5px;
		}
		.btn span{
			color: white;
			font-size: 12px;
			width: 15px;
			height: 15px;
			line-height: 15px;
			text-align: center;
			display: inline-block;
			background: black;
			opacity: 0.5;
			border-radius: 50%;
			margin-left: 2px;
			cursor: pointer;
		}
		.btn span.cur{
			opacity: 1;
		}
	</style>
</head>
<body>
	<div class="box">
		<ul class="banner">
			<li><a href=""><img src="../images/1.jpg" alt=""></a></li>
			<li><a href=""><img src="../images/2.jpg" alt=""></a></li>
			<li><a href=""><img src="../images/3.jpg" alt=""></a></li>
			<li><a href=""><img src="../images/4.jpg" alt=""></a></li>
			<li><a href=""><img src="../images/5.jpg" alt=""></a></li>
			<li><a href=""><img src="../images/6.jpg" alt=""></a></li>
		</ul>
		<div class="btn"></div>
	</div>
	<script>
     var ul = document.querySelector('ul.banner');
     var lis = document.querySelectorAll('ul.banner li');
     var btn = document.querySelector('.btn');
     var l = lis.length;
     var i = 0;
     var T = setInterval(run, 1000);
    	for(var j = 1; j <= l; j++) {
			var span = document.createElement('span')
			span.innerHTML = j;
			btn.appendChild(span);
		}
		var spans = document.querySelectorAll('.btn span');
     	spans.forEach(function(v, index){
     	if(index == i) {
     		v.className = 'cur';
     	}
     })
     function run() {
     	if(i == l) {
     		i = 0;
     	}
     	ul.style.left = -1 * 180 * i + 'px';
     	spans.forEach(function(v, index) {
     		v.classList.remove('cur');
     		if(index == i) {
     			v.className = 'cur';
     		}
     	})
     	i++;
     }
     ul.onmouseover = function() {
     	clearInterval(T)
     }
     ul.onmouseout = function() {
     	T = setInterval(run, 1000);
     }







    /* var ul = document.querySelector('ul.banner')
		var lis = document.querySelectorAll('ul.banner li')
		var btn = document.querySelector('.btn') // 控制点
		var l = lis.length; // 图片数量

		var i = 0 // 当前图片位置

		var T = setInterval(run, 1000)  // 轮播

		// 创建span标签
		for(var j = 1; j <= l; j++) {
			var span = document.createElement('span')
			span.innerHTML = j;
			btn.appendChild(span);
		}
		var spans = document.querySelectorAll('.btn span')
		
		spans.forEach(function(v, index){
			if(index == i) {
				v.className = 'cur'
			}
		})

		function run () {
			if(i == l) { // 当当前图片位置等于图片数量时，设置为0
				i = 0;
			}
			// 每次左移一张图片
			ul.style.left = -1 * 180 * i + "px";
			spans.forEach(function(v, index){
				v.classList.remove('cur')
				if(index == i) {
					v.className = 'cur'
				}
			})
			i++;
		}

		ul.onmouseover = function() {
			clearInterval(T)
		}

		ul.onmouseout = function() {
			T = setInterval(run, 1000) 
		}
*/
		// 扩展： 鼠标点击n个小圆圈，第n张图片显示。
	</script>
</body>
</html>